<template>
    <div>
        <!-- 热门话题 -->
        <div class="bg-#3f3f3f px-6px py-9px text-#fff">
            <div
                class="text-13px font-bold tracking-1px flex flex-justify-between"
            >
                <span>-热门话题</span>
                <span class="text-#f546fc underline">看更多</span>
            </div>
            <div class="px-6px">
                <div
                    v-for="item in hotTopic"
                    :key="item.id"
                    class="flex flex-justify-between text-12px lh-12px align-center gap-10px my-12px"
                >
                    <div
                        class="flex flex-col items-center font-bold gap-2px justify-center pb-8px"
                    >
                        <div>
                            回响
                        </div>
                        <div class="text-#e074e9">
                            {{ item.topic_count }}
                        </div>
                    </div>
                    <div
                        class="flex-1 flex flex-justify-between items-center pb-8px"
                        style="border-bottom: 1px solid #b6b6b6"
                    >
                        <div class="flex flex-col gap-5px">
                            <div>话题：{{ item.tag_name }}</div>
                            <div class="font-bold">
                                帖子：{{ item.topic_title }}
                            </div>
                        </div>
                        <div
                            class="text-9px text-#d8d8d8 flex flex-col justify-center items-center h-full"
                        >
                            <div>{{ item.nickname }}</div>
                            <div>{{ item.topic_time }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="px-12px py-20px text-#fff">
            <img src="../images/invalid-name.webp" alt="" class="w-full" />
            <!-- 热门游戏版 -->
            <div>
                <div
                    class="text-13px font-bold tracking-1px flex flex-justify-between"
                >
                    <span>-热门游戏版</span>
                    <span class="text-#f546fc underline">看更多</span>
                </div>
                <div class="grid grid-cols-2 gap-12px mt-12px">
                    <div
                        v-for="(item, index) in hotGame"
                        :key="item.id"
                        class="flex items-center text-12px gap-7px"
                    >
                        <span
                            class="font-bold w-18px h-18px rounded-full flex-shrink-0 text-center lh-19px"
                            :class="[
                                index === 0 && 'bg-#e1251b',
                                index === 1 && 'bg-#00c7fa',
                                index === 2 && 'bg-#ac43b5',
                            ]"
                            >{{ index + 1 }}</span
                        >
                        <img :src="item.game_cover" alt="" class="w-43px" />
                        <div>
                            <span>{{ item.game_name }}</span>
                            <span>{{ item.topic_count }} 关注</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 最新帖子 -->
            <div class="mt-36px">
                <div
                    class="text-13px font-bold tracking-1px flex flex-justify-between"
                >
                    <span>-最新帖子</span>
                </div>
                <div class="part-wrap">
                    <div
                        class="part"
                        :style="{
                            height: isUnfold_discuss ? 'fit-content' : '280px',
                        }"
                    >
                        <div class="item-top">
                            <div class="top">
                                <div class="top-tag">
                                    <span>NEW</span>
                                </div>
                                <div>
                                    <div class="comment">
                                        <img
                                            src="@pages/game-detail/images/comment.webp"
                                            alt=""
                                        />
                                        <span>{{ topicInfo?.post_count }}</span>
                                    </div>
                                    <div class="praise">
                                        <img
                                            src="@pages/game-detail/images/praise-white.webp"
                                            alt=""
                                        />
                                        <span>{{ topicInfo?.like_count/ 1000 }}k</span>
                                    </div>
                                    <div class="praise">
                                        <span>回复</span>
                                    </div>
                                    <div class="praise">
                                        <span>关注此人</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content">
                                <div class="left">
                                    <div>
                                        <img
                                            :src="topicInfo?.user_avatar"
                                            alt=""
                                        />
                                        <div>
                                            <div>{{ topicInfo?.nickname }}</div>
                                            <div class="tag">· 已注册{{ topicInfo?.register_day }}天</div>
                                            <div class="tag">· 已玩游戏{{ topicInfo?.game_played }}</div>
                                        </div>
                                    </div>
                                    <div>
                                        <nut-button v-for="item in topicInfo?.tag_name">
                                            #{{ item.name }}
                                        </nut-button>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="con">
                                       {{ topicInfo?.content }}
                                    </div>
                                    <div class="pic-list">
                                        <img
                                            v-for="item in topicInfo?.images"
                                            :key="item"
                                            :src="item"
                                            alt=""
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-for="item in 5" :key="item" class="item">
                            <div style="width: 100px; flex-shrink: 0"></div>
                            <div class="right">
                                <div class="top">
                                    <div>
                                        <img
                                            src="@pages/game-detail/images/avatar.webp"
                                            alt=""
                                            class="translate-y-[-5px]"
                                        />
                                        <div class="flex flex-col">
                                            <span
                                                class="text-12px lh-14px mb-3px"
                                                >黄油小郎君</span
                                            >
                                            <span
                                                class="text-8px lh-12px text-#a4a4a4"
                                                >· 已注册188天</span
                                            >
                                            <span
                                                class="text-8px lh-12px text-#a4a4a4"
                                                >· 已玩游戏78</span
                                            >
                                        </div>
                                    </div>
                                    <div class="flex gap-5px">
                                        <div class="flex items-center gap-3px">
                                            <img
                                                src="@pages/game-detail/images/comment.webp"
                                                alt=""
                                                class="!w-10px translate-y-1px"
                                            />
                                            <span class="text-10px">3,383</span>
                                        </div>
                                        <div class="praise">
                                            <img
                                                src="@pages/game-detail/images/praise-white.webp"
                                                alt=""
                                            />
                                            <span>12k</span>
                                        </div>
                                        <div class="praise">
                                            <span>回复</span>
                                        </div>
                                        <div class="praise">
                                            <span>关注此人</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="con">
                                    <div>
                                        ※引述《黄油小郎君》之銘言看在色色女角的份上還是續玩了，官方請快開發一個安卓手機也能玩STEAM的APP吧！
                                    </div>
                                    <div>
                                        花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善。
                                    </div>
                                </div>
                                <div class="pic-list">
                                    <img
                                        v-for="item in 10"
                                        :key="item"
                                        src="@pages/game-detail/images/game-con.webp"
                                        alt=""
                                    />
                                </div>
                            </div>
                        </div>
                        <!-- 留言 -->
                        <div
                            class="flex gap-5px"
                            style="border-bottom: solid 1px #595959"
                        >
                            <div style="width: 100px; flex-shrink: 0"></div>
                            <div
                                class="bg-#fff w-full overflow-hidden mt-15px mb-18px rounded-5px"
                            >
                                <nut-input
                                    v-model="val"
                                    placeholder="Placeholder"
                                    class="w-full text-red"
                                />
                                <div class="flex bg-#3c3c3c px-9px py-5px gap-4px">
                                    <img src="../images/crtp.webp" alt="" class="w-70px"/>
                                    <img src="../images/scxp.webp" alt="" class="w-70px"/>
                                    <img src="../images/bqfh.webp" alt="" class="w-70px"/>
                                </div>
                                <div class="flex items-center justify-center py-10px gap-6px">
                                    <nut-button class="!w-fit !h-28px !text-12px !text-#fff !border-none !bg-#339ede">取消留言</nut-button>
                                    <nut-button class="!w-fit !h-28px !text-12px !text-#fff !border-none !bg-#eb49a8">送出回复</nut-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="read-more"
                        @click="isUnfold_discuss = !isUnfold_discuss"
                    >
                        <span>{{
                            isUnfold_discuss ? "收起帖子" : "展开帖子"
                        }}</span>
                        <div
                            class="triangle"
                            :class="isUnfold_discuss && 'rotate-180deg'"
                        ></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {axiosService} from "@http";

const val = ref("");
// 热门话题
const hotTopic = ref([
    {
        id: 1,
        name: "回响",
        count: "999",
        topic: "SOUL DESCENT",
        content: "如何快速解锁全色色动画片段",
        author: "黄油小郎君",
        time: "2025-03-21",
    },
    {
        id: 2,
        name: "回响",
        count: "999",
        topic: "SOUL DESCENT",
        content: "如何快速解锁全色色动画片段",
        author: "黄油小郎君",
        time: "2025-03-21",
    },
    {
        id: 3,
        name: "回响",
        count: "999",
        topic: "SOUL DESCENT",
        content: "如何快速解锁全色色动画片段",
        author: "黄油小郎君",
        time: "2025-03-21",
    },
]);

// 热门游戏版
const hotGame = ref([
    {
        id: 1,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 2,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 3,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 4,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 5,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 6,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 7,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 8,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 9,
        name: "LUST GODDESS",
        count: "140万",
    },
    {
        id: 10,
        name: "LUST GODDESS",
        count: "140万",
    },
]);

const topicInfo = ref()

const isUnfold_discuss = ref(false); // 是否展开

const getGameList=()=>{
    axiosService.post('/api/Topic/topicAll',{}).then(res=>{
        hotTopic.value=res.data?.hot_topic_list ||[]
        hotGame.value = res.data?.hot_game_model ||[]
        topicInfo.value = res.data?.new_topic_info
    })
}
getGameList()

</script>

<style scoped lang="scss">
.part-wrap {
    border: solid 1px #6d6d6d;
    border-radius: 5px;
    background: #3c3c3c;

    .part {
        padding: 10px;
        overflow: hidden;

        .item-top {
            padding-bottom: 10px;
            border-bottom: solid 1px #595959;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .top-tag {
                    background: url(../../game-detail/images/top-bg.webp);
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 80px;
                    height: 20px;
                    font-size: 12px;
                    font-weight: bold;
                    transform: translate(18px, -11px);
                    gap: 5px;

                    img {
                        width: 16px;
                    }
                }

                & > div:last-child {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    gap: 5px;
                    margin-bottom: 5px;

                    img {
                        width: 12px;
                    }

                    .praise,
                    .comment {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 10px;
                        line-height: 10px;
                    }

                    .praise {
                        background: #eb49a8;
                        border-radius: 99px;
                        padding: 7px 8px 5px;
                    }

                    .comment {
                        margin-right: 5px;

                        img {
                            transform: translateY(1px);
                        }
                    }
                }
            }

            .item-content {
                display: flex;
                align-items: start;
                justify-content: space-between;
                gap: 5px;

                .left {
                    flex-shrink: 0;
                    width: 100px;

                    & > div:first-child {
                        display: flex;
                        align-items: start;
                        gap: 5px;

                        img {
                            width: 30px;
                        }

                        & > div {
                            font-size: 12px;

                            .tag {
                                font-size: 8px;
                                color: #a4a4a4;
                                line-height: 14px;
                            }
                        }
                    }

                    & > div:last-child {
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 10px;
                        margin-top: 20px;

                        .nut-button {
                            background: #339ede;
                            border: none;
                            color: #fff;
                            height: 18px;
                            font-size: 8px !important;
                            padding: 0 5px;
                        }
                    }
                }

                .right {
                    margin-top: 5px;
                    flex: 1;
                    overflow: hidden;

                    .con {
                        font-size: 10px;
                        line-height: 16px;
                    }

                    .pic-list {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        overflow-x: auto;
                        margin-top: 20px;

                        img {
                            width: 120px;
                        }
                    }
                }
            }
        }

        .item {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 5px;
            padding: 10px 0;
            border-bottom: solid 1px #595959;

            .right {
                flex: 1;
                overflow: hidden;

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    white-space: nowrap;

                    & > div {
                        display: flex;
                        align-items: center;
                    }

                    & > div:first-child {
                        gap: 5px;
                    }

                    img {
                        width: 22px;
                    }

                    .tag {
                        font-size: 8px;
                        color: #a4a4a4;
                    }

                    .praise {
                        background: #eb49a8;
                        border-radius: 99px;
                        line-height: 1em;
                        font-size: 8px;
                        padding: 5px 6px;

                        img {
                            width: 9px;
                        }
                    }
                }

                .con {
                    font-size: 12px;
                    line-height: 16px;

                    & > div:first-child {
                        color: #8b8b8b;
                        margin: 10px 0;
                    }
                }

                .pic-list {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    overflow-x: auto;
                    margin-top: 20px;

                    img {
                        width: 120px;
                    }
                }
            }
        }
    }

    .read-more {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        gap: 5px;
        margin: 0px 20px 0 20px;
        padding: 5px 0;
        font-size: 13px;

        .triangle {
            width: 0;
            height: 0;
            border-top: 8px solid #339ede;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    }
}

:deep(.nut-input) {
    padding: 6px 8px;
    height: 100px;

    .input-text {
        color: #8b8b8b;
    }
}
</style>
